<%@page import="org.springframework.security.core.context.SecurityContextImpl"%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="/jstl/fn" prefix="fn"%>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
	
	SecurityContextImpl securityContextImpl = (SecurityContextImpl)request.getSession().getAttribute("SPRING_SECURITY_CONTEXT");
%>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1 user-scalable=0">
<link rel="stylesheet" href="<%=basePath%>assets/css/public.css">
<link rel="stylesheet"
	href="<%=basePath%>assets/css/idangerous.swiper.css">

<title>商品详情</title>
<link rel="stylesheet" href="<%=basePath%>assets/css/page.css">
<link rel="stylesheet"
	href="<%=basePath%>assets/font-awesome-4.7.0/css/font-awesome.min.css">
<script src="<%=basePath%>/assets/js/jquery-1.8.3.min.js"></script>
<script src="<%=basePath%>assets/js/fontSize.js"></script>
<link href="<%=basePath%>/assets/layer/mobile/need/layer.css"
	rel="stylesheet" type="text/css">
<script src="<%=basePath%>/assets/layer/mobile/layer.js"></script>
<link rel="stylesheet" href="<%=basePath%>/assets/imgTools/helmet.css">
<style>
.fanhui {
	font-size: 0.5rem;
	line-height: 0.8rem;
	width: 13%;
	color: #fff;
	text-align: center;
}

.header_gengduo {
	height: 0.8rem;
	line-height: 0.8rem;
	padding: 4%;
}

.shangpinxinxi {
	background: #fff
}

.shangjiaxinxi {
	border-bottom: 1px solid #f1f1f1;
	padding-bottom: 0.2rem;
	background: #fff
}

.shangjiaxinxi img {
	width: 12%;
	padding: 0 4%;
	border-radius: 50%
}

.shangjiaxinxi_cont {
	width: 80%
}

.shangjiaxinxi_cont h4 {
	font-size: 0.24rem;
	font-weight: bold;
	line-height: 0.5rem
}

.shangjiaxinxi_cont p {
	font-size: 0.20rem;
	line-height: 0.4rem;
}

.maijiamingcheng {
	text-indent: 0.3rem
}

.maijiadianpujieshao {
	text-indent: 0.3rem
}

.shangjiaxinxi {
	padding-top: 0.3rem
}

.shangpinjieshao {
	font-size: 0.22rem;
	line-height: 0.3rem;
	padding: 0.2rem;
	background: #fff;
	border-bottom: 5px solid #f1f1f1;
}

.shangpintupian {
	width: 80%;
	padding: 0.3rem 10%
}

.shangpintupian img {
	width: 100%
}

.shangpinjiage {
	border-bottom: 1px solid #f1f1f1;
	background: #fff
}

.shangpinjiage>p {
	font-size: 0.28rem;
	line-height: 0.4rem;
	padding: 0.1rem 0.3rem
}
/*         .shangpinjiage>div>span{font-size: 0.35rem;line-height: 0.6rem;padding:  0 0.3rem} */
.shangpinjiage>div>.goodsPrice i {
	font-size: 0.35rem;
	line-height: 0.6rem;
	padding: 0 0.3rem 0 0
}

.shangpinjiage>div>.goodsSales {
	font-size: 0.2rem;
	line-height: 0.6rem;
	padding: 0 0.3rem
}

.guige {
	font-size: 0.20rem;
	color: #ccc;
	text-indent: 0.3rem;
	height: 0.8rem;
	line-height: 0.8rem;
	border-top: 1px solid #ccc
}

.shangpinjieshao h3, .pinglun h3 {
	font-size: 0.3rem;
	font-weight: bold;
	height: 0.5rem;
	line-height: 0.5rem;
}

.pinglun h3 {
	padding: 0.2rem;
	background: #fff;
}

.shangpinjieshao p {
	font-size: 0.26rem;
	line-height: 0.4rem;
}
</style>

<script>
        $(function () {
            $('.shangjiaxinxi>img').height($('.shangjiaxinxi>img').width())
        })
    </script>

</head>
<body>
	<style>
body {
	background: #f8f8f8;
	padding-bottom: 0.8rem;
	padding-top: 0.8rem;
}

.navPOS {
	height: 0.8rem;
}

.navPOS span {
	width: 20%;
	height: 0.8rem;
	line-height: 0.8rem;
	font-size: 0.2rem
}

.navPOS span img {
	width: 30%;
	margin: 0.2rem 0.05rem 0.2rem 0.2rem;
	float: left
}

.xiangyao {
	width: 25%;
	height: 0.8rem;
	text-align: center;
	line-height: 0.8rem;
	color: #fff;
	font-size: 0.24rem;
}

.xiangyao.jiarugouwuche {
	background: #FF3F25
}

.xiangyao.goumai {
	background: red
}

.gouwuche_icon {
	position: relative
}

.gwcNumber {
	background: red;
	width: 0.3rem;
	height: 0.25rem;
	position: absolute;
	right: 43%;
	top: 0.07rem;
	border-radius: 50%;
	color: #fff;
	line-height: 0.30rem;
	font-size: 0.1rem;
	text-align: center
}

.body_bj {
	background: rgba(0, 0, 0, 0.3);
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	display: none;
	z-index: 10;
}

.guanbi {
	position: absolute;
	right: 0.2rem;
	top: 0.2rem;
	line-height:0.2rem;
	font-size: 0.2rem;
}

.gouwuche_box {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: -1.5rem;
	background: #fff;
	min-height: 3.5rem;
	padding-bottom: 1.5rem;
	z-index: 11;
}

.shangpinxiangqing {
	width: 100%;
	border-bottom: 1px solid #f1f1f1;
	padding-bottom: 0.1rem
}

.shangpinxiangqing img {
	width: 30%;
	display: block;
	border: 5px solid #fff;
	margin: -5% 0 0 2%;
}

.shangpinxiangqing_text {
	width: 50%;
	padding-left: 0.2rem;
	padding-top: 0.1rem;
}

.shangpinxiangqing_text>p {
	font-size: 0.2rem;
	line-height: 0.36rem;
}

.shangpinxiangqing_text>p.jiage {
	color: red;
	line-height: 0.4rem;
	font-weight: bold;
	font-size: 0.26rem;
}

.shangpinfenlei {
	width: 96%;
	padding: 0 2%;
	padding-bottom: 0.1rem
}

.shangpinfenlei p {
	font-size: 0.3rem;
	line-height: 0.5rem;
	text-indent: 0.1rem
}

.shangpinfenlei ul li {
	float: left;
	margin: 0.1rem
}

.shangpinfenlei ul li a {
	padding: 0 0.2rem;
	height: 0.42rem;
	line-height: 0.42rem;
	background: #e1e1e1;
	border-radius: 3px;
	display: block;
}

.shangpinfenlei ul li a.active {
	padding: 0 0.2rem;
	height: 0.42rem;
	line-height: 0.42rem;
	background: #e1e1e1;
	border-radius: 3px;
	display: block;
	color: #ccc;
	background: #FF3F25;
}

.queding_but {
	width: 100%;
	background: red;
	color: #fff;
	font-size: 0.3rem;
	height: 0.8rem;
	line-height: 0.8rem;
	text-align: center;
	display: block;
	border-radius: 5px;
	position: absolute;
	left: 0;
	bottom: 0
}

.goumaishuliang {
	border-bottom: 1px solid #f1f1f1;
	position: absolute;
	left: 0;
	bottom: 1rem;
	width: 100%;
	border-top: 1px solid #f1f1f1;
}

.goumaishuliang p {
	width: 40%;
	float: left;
	padding-left: 10%;
	height: 0.6rem;
	line-height: 0.6rem;
	font-size: 0.24rem
}

.goumaishuliang p a {
	width: 20%;
	height: 0.6rem;
	line-height: 0.6rem;
	display: block;
	float: left;
	text-align: center;
	border-left: 1px solid #f1f1f1;
	border-right: 1px solid #f1f1f1;
	text-indent: 0;
}

.goumaishuliang p input {
	width: 40%;
	height: 0.6rem;
	line-height: 0.6rem;
	display: block;
	float: left;
	text-align: center
}
	<input type="hidden" value="<%=basePath%>" id="basePath">

	<!-- 头部开始  -->
	<div class="header">
		<div class='header_top'>
			<a class=returnInfo href="#" onclick="javascript:history.go(-1);"><i class="fa fa-angle-left"></i></a>
			<div class="header_top">商品详情</div>
		</div>
	</div>
	<style>
.swiper-container {
	height: 3rem;
	width: 100%;
}

.swiper-slide img {
	width: 100%;
	height: 100%;
	display: block
}

.device {
	width: 100%;
	height: 3rem;
	/*padding: 30px 40px;*/
	/*border-radius: 20px;*/
	/*background: #111;*/
	/*border: 3px solid white;*/
	/*margin: 5px auto;*/
	position: relative;
	/*box-shadow: 0px 0px 5px #000;*/
}

.device .arrow-left {
	background: url(img/arrows.png) no-repeat left top;
	position: absolute;
	left: 10px;
	top: 50%;
	margin-top: -15px;
	width: 17px;
	height: 30px;
}

.device .arrow-right {
	background: url(img/arrows.png) no-repeat left bottom;
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -15px;
	width: 17px;
	height: 30px;
}

.swiper-container {
	height: 3rem;
	width: 100%;
}

.swiper-slide img {
	width: 100%;
	height: 100%;
	display: block
}

.pagination {
	position: absolute;
	left: 0;
	text-align: center;
	bottom: 0;
	width: 100%;
	z-index: 1000;
}

.swiper-pagination-switch {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background: #999;
	box-shadow: 0px 1px 2px #555 inset;
	margin: 0 3px;
	cursor: pointer;
}
/* .pinglun{border-top:1px solid #ccc} */
.pinglun ul li {
	width: 98%;
	padding: 0 1%;
	background: #fff;
	padding-bottom: 0.1rem;
	border-bottom: 0.01rem solid #f1f1f1
}

.pinglun ul li>.img, .pinglun ul li>.img2 {
	width: 0.6rem;
	height: 0.6rem;
	overflow: hidden;
	border-radius: 10%;
	margin: 0.1rem;
}

.pinglun ul li>.img img, .pinglun ul li>.img2 img {
	width: 100%;
	display: block;
}

.pinglun ul li>.pltext {
	width: 81%;
}

.pinglun ul li>.pltext .plrenxx {
	font-size: 0.24rem;
	line-height: 0.4rem;
	padding-top: 0.06rem
}

.pinglun ul li>.pltext .plxx {
	font-size: 0.22rem;
	line-height: 0.3rem;
	padding: 0.1rem 0;
}

.pinglun ul li>.pltext .plrenxx>span {
	font-size: 0.2rem;
	color: #aaaaaa;
	float: right
}

.pinglun ul li>.pltext .plxxziliao>a {
	color: #007aff;
	font-size: 0.16rem;
	line-height: 0.3rem;
	padding: 0 0.1rem
}
</style>
	<div class="datulunbo">
		<div class="swiper">
			<div class="device">

				<div class="swiper-container">
					<div class="swiper-wrapper">
						<c:set value="${ fn:split(goods.goodsImage, ',') }" var="imgList" />
						<c:forEach items="${imgList}" var="img" varStatus="status">
							<div class="swiper-slide">
								<img
									src="<%=basePath%>/app/getGoodsPhotoByName?goodsImage=${img}">
							</div>
						</c:forEach>
					</div>
				</div>
				<div class="pagination"></div>
			</div>
			<script src="<%=basePath%>assets/js/idangerous.swiper.min.js"></script>
			<script>
            var mySwiper = new Swiper('.swiper-container',{
                pagination: '.pagination',
                paginationClickable: true,
                spaceBetween: 30,
                centeredSlides: true,
                autoplay: 2500,
                autoplayDisableOnInteraction: false
            })
        </script>
		</div>
	</div>
	<!-- 轮播图部分结束 -->



	<div class="content">
		<div class="shangpinjiage clearFirx">
			<p>${goods.goodsName}</p>
			<div class='clearFirx'>
				<span class="float_r goodsPrice" style='color: red'>￥<i>${goods.goodsPrice}</i></span>
				<span class="float_l goodsSales">销量 <c:if
						test="${goods.goodsSales != null}">${goods.goodsSales}件</c:if> <c:if
						test="${goods.goodsSales == null}">0件</c:if>
				</span>
			</div>
		</div>
		<div class="shangpinxinxi">
			<div class="shangpinjieshao">
				<h3>商品描述</h3>
				<p>${goods.goodsIntro}</p>
			</div>
		</div>
		<div class="pinglun">
			<h3>商品评论</h3>
			<ul>
				<c:forEach var="aboutGoodsOfAppraises"
					items="${aboutGoodsOfAppraises}">
					<li class="clearFirx">
						<div class="float_l img">
							<c:if test="${not empty aboutGoodsOfAppraises.userPhoto}">
								<img
									src="<%=basePath%>app/getGoodsPhotoByName?goodsImage=${aboutGoodsOfAppraises.userPhoto}"
									class="float_l">
							</c:if>
							<c:if test="${empty aboutGoodsOfAppraises.userPhoto}">
								<img src="<%=basePath%>/assets/css/aboutUs/logo.png" alt=""
									class="float_l">
							</c:if>
						</div>
						<div class="pltext float_l">
							<p class="plrenxx">${aboutGoodsOfAppraises.userName}
								<span class="float_r">${fn:substring(aboutGoodsOfAppraises.createDate, 0, 10)}</span>
							</p>
							<p class="plxx">${aboutGoodsOfAppraises.content}</p>
							<p class="plxxziliao clearFirx">
							</p>
						</div>
					</li>
				</c:forEach>
			</ul>
		</div>
</body>
</html>